// ==UserScript==
// @name         inject
// @namespace    王某人
// @version      1.0.0
// @description  依赖注入模板
// @author       王某人
// @include      *://*/*
// ==/UserScript==

(function () {

  class Handle {

    _mainData = {}
    main(data) {
      this._mainData = data
      return this
    }

    _routerData = []
    router(data) {
      this._routerData = data
      return this
    }

    async init(config) {
      const appDom = document.createElement("div");
      appDom.id = 'injectApp';
      document.body.appendChild(appDom)

      await this._inject('link', '//fastly.jsdelivr.net/npm/vant@4/lib/index.css')
      await this._inject('script', '//fastly.jsdelivr.net/npm/vue@3')
      // await this._inject('script', '//unpkg.com/vue-router@4')
      await this._inject('script', '//fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js')


      // 注册main
      const app = Vue.createApp(this._mainData);

      if (this._routerData.length) {
        // 注册路由
        const router = VueRouter.createRouter({
          history: VueRouter.createWebHashHistory(), // hash 模式
          routes: this._routerData,
        })
        app.use(router)
      }

      app.use(vant);
      app.mount("#injectApp");
    }

    // 注入脚本
    _inject(data, src) {
      return new Promise((resolve, reject) => {
        let inDocument = null
        if (data === 'script') {
          inDocument = document.createElement('script');
          inDocument.src = src
        } else if (data === 'link') {
          inDocument = document.createElement('link');
          inDocument.setAttribute('rel', 'stylesheet');
          inDocument.href = src
        }

        inDocument && document.documentElement.appendChild(inDocument);
        inDocument.onload = resolve
      })

    }

    // 注入样式
    GMaddStyle(css) {
      var myStyle = document.createElement('style');
      myStyle.textContent = css;
      var doc = document.head || document.documentElement;
      doc.appendChild(myStyle);
      return this
    };
  }

  const style = `
    .in_power {
      position: fixed !important;
      bottom: 80px;
      right: 30px;
      z-index: 10;
      font-size: 36px !important;
    }
    .popup-example-block{
      padding: 16px;
      height: calc(100% - 50px);
      box-sizing: border-box;
      overflow: auto;
      position: relative
    }
  `
  const asd = {
    template: `<img alt="今日诗词" style="width:100%;display: block;" src="https://v2.jinrishici.com/one.svg">`
  }
  const app = {
    components: {
      asd
    },
    template:
      `
      <van-icon class="in_power" name="smile-o" color="#364CC6"  @click="show = true" />

      <van-popup v-model:show="show" round position="bottom" :style="{ height: '60%' }">
        <div class="popup-example-block" @click="click">
          <asd />
        </div>
        <van-tabbar v-model="active">
          <van-tabbar-item name="home" icon="home-o">Go to Home</van-tabbar-item>
          <van-tabbar-item name="setting" icon="setting-o">Go to setting</van-tabbar-item>
        </van-tabbar>
      </van-popup>
    `,
    setup() {
      const { ref } = Vue

      const show = ref(false)
      const active = ref('home');

      async function click() {
        await copyToClipboard(12138)
        alert('已复制')
      }


      // 复制
      function copyToClipboard(textToCopy) {
        // navigator clipboard 需要https等安全上下文
        if (navigator.clipboard && window.isSecureContext) {
          // navigator clipboard 向剪贴板写文本
          return navigator.clipboard.writeText(textToCopy);
        } else {
          const oInput = document.createElement("input");
          oInput.value = textToCopy;
          oInput.readOnly = "readOnly";
          document.body.appendChild(oInput);
          oInput.select(); // 选择对象
          document.execCommand("Copy"); // 执行浏览器复制命令

          document.body.removeChild(oInput)
          return Promise.resolve()
        }
      }

      return {
        show,
        active,
        click
      }
    }
  }
  new Handle().GMaddStyle(style).main(app).init()
})();